<template>
	<div>
		<el-card class="box-card" shadow="hover">
			<div slot="header"  class="clearfix">
				<span class="clearfix-clr">职员管理</span>
			</div>
			<!-- 查询 -->
			<div class="box-form">
				<el-form :inline="true" :model="formInline" class="demo-form-inline">
				  <el-form-item label="姓名">
					<el-input v-model="key" placeholder="职员名" class="demo-form-ipt"></el-input>
				  </el-form-item>
				  <el-form-item label="职员类型">
					<el-select v-model="formInline.region" placeholder="请选择" class="demo-form-ipt">
					  <el-option label="普通职员" value="普通职员"></el-option>
					  <el-option label="财务总监" value="财务总监"></el-option>
					  <el-option label="项目经理" value="项目经理"></el-option>
					</el-select>
				  </el-form-item>
				  <el-form-item>
					<el-button type="primary" class="form-btn" @click="getClerkList">查询</el-button>
				  </el-form-item>
				</el-form>
				<el-button type="primary" class="form-btn" @click="dialogVisible = true">添加</el-button>
				<el-button type="danger" class="form-btn" @click="DelAll()" >批量删除</el-button>
			</div>
			<!-- 表格 -->
			<div class="box-table box-form">
				<el-table
					ref="multipleTable"
					:data="clerklist"
					tooltip-effect="dark"
					border
					:model="form"
					style="width: 100% ;margin: 0 auto"
					@selection-change="handleSelectionChange">
					<el-table-column
					  type="selection"
					  align="center">
					</el-table-column>
					<el-table-column
					  label="id"
					  prop="id"
					  align="center">
					</el-table-column>
					<el-table-column
					  prop="name"
					  align="center"
					  label="姓名">
					</el-table-column>
					<el-table-column
					  prop="typename"
					  align="center"
					  label="职员类型">
					</el-table-column>
					<el-table-column
					  prop="sex"
					  align="center"
					  label="性别">
					</el-table-column>
					<el-table-column
					  prop="cardid"
					  align="center"
					  label="身份证号">
					</el-table-column>
					<el-table-column
					  prop="mobile"
					  align="center"
					  label="手机号">
					</el-table-column>
					<el-table-column
					  prop="building"
					  align="center"
					  label="管理小区">
					</el-table-column>
					<el-table-column
					  align="center"
					  label="操作">
					<template slot-scope="scope">
						<!-- 修改 -->
					  <el-button type="success" @click="update(scope.row)" style="padding: 10px 20px;">修改</el-button>
					  <el-button type="danger" @click="del(scope.row.id)" style="padding: 10px 20px;">删除</el-button>
					</template>
					</el-table-column>
				  </el-table>
			</div>
			<!-- 分页 -->
			<div class="block">
				<el-pagination
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :current-page="pages.page"
				  :page-sizes="[10, 20, 30, 40]"
				  :page-size="pages.paize"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="pages.total">
				</el-pagination>
			</div>
		</el-card>
		<el-dialog
		  title="添加职员"
		  :visible.sync="dialogVisible"
		  width="40%"
		  align="center"
		  :before-close="handleClose"
		  >
		  <!-- 添加表单 -->
		  <el-form :model="form" :rules="rules" ref="form"  class="demo-ruleForm">
		    <div style="display: inline-block; width: 40%;" >
				<el-form-item label="照片" prop="image">
					<el-upload
					  class="avatar-uploader"
					  action="https://jsonplaceholder.typicode.com/posts/"
					  :show-file-list="false"
					  :on-success="handleAvatarSuccess"
					  :before-upload="beforeAvatarUpload">
					  <img v-if="imageUrl" :src="imageUrl" class="avatar">
					  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="姓名" prop="name">
				  <el-input v-model="form.name" placeholder="张四" style="width: 70%;float: right;"></el-input>
				</el-form-item>
				<el-form-item label="管辖范围" prop="building">
				    <el-cascader 
					style="width: 70%;float: right;"
				      v-model="form.building"
				      :options="options"></el-cascader>
				</el-form-item>
				<el-form-item label="职员类型" prop="typename">
				  <el-select v-model="form.typename"  style="width: 70%;float: right;" placeholder="请选择">
					<el-option label="普通职员" value="普通职员"></el-option>
					<el-option label="财务总监" value="财务总监"></el-option>
					<el-option label="项目经理" value="项目经理"></el-option>
				  </el-select>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-radio-group v-model="form.sex">
					      <el-radio label="0" value="男">男</el-radio>
					      <el-radio label="1" value="女">女</el-radio>
					    </el-radio-group>
				</el-form-item>
				</div>
				<div style="float: right;width: 40%; margin-top: 80px;">
					<el-form-item label="身份证号" prop="cardid">
					  <el-input v-model="form.cardid"  style="width: 70%;"></el-input>
					</el-form-item>
					<el-form-item label="联系电话" prop="mobile">
					  <el-input v-model="form.mobile"  style="width: 70%;"></el-input>
					</el-form-item>
				</div>
			</el-form>
			<div class="dialog-footer">	
				<span slot="footer" >
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="add">确 定</el-button>
				</span>
			</div>
		  
		</el-dialog>
<!-- 修改 -->
    <el-dialog title="修改职员" :visible.sync="xiugai" width="50%" center>
      <!-- <div class=""> -->
      <el-form
        :model="updata"
        ref="ruleForm"
        label-width="100px"
        class="tianjia demo-ruleForm"
      >
        <div class="left-box">
          <el-form-item label="头像" prop="name" style="width: 300px">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="姓名" prop="name" style="width: 300px">
            <el-input v-model="updata.name"></el-input>
          </el-form-item>
          <el-form-item label="职员类型" prop="typename">
              <el-select v-model="form.typename"  style="width: 70%;float: right;" placeholder="请选择">
				<el-option label="普通职员" value="普通职员"></el-option>
				<el-option label="财务总监" value="财务总监"></el-option>
				<el-option label="项目经理" value="项目经理"></el-option>
			  </el-select>
          </el-form-item>

          <el-form-item label="性别">
            <el-radio-group v-model="updata.sex">

              <el-radio v-model="updata.sex" value="男" label="男"></el-radio>
              <el-radio  v-model="updata.sex" value="女" label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="right-box">

          <el-form-item label="身份证号" prop="cardid" style="width: 300px">

          <!-- <el-form-item label="身份证号" prop="idnumber" style="width: 300px"> -->

            <el-input v-model="updata.cardid"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile" style="width: 300px">
            <el-input v-model="updata.mobile"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <!-- </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="xiugai = false">取 消</el-button>

        <el-button type="primary" @click="amend">确 定</el-button>

      </span>
    </el-dialog>
	</div>
</template>

<script>
	import {clerklist,clerkdel,clerkdelel,clerkadd} from '../../api/user.js'
	export default {
	    data() {
	      return {
			  key:'',
			  form:{
				id:0,
				name: '',
				typename: '',
				sex: '',
				cardid: '',
				mobile: '',
				building: [], 
			  },
			  value: [],
			  options: [{
				value: 'zhinan',
				label: '指南',
				children: [{
				  value: 'shejiyuanze',
				  label: '设计原则',
				  children: [{
					value: 'yizhi',
					label: '一致'
				  }, {
					value: 'fankui',
					label: '反馈'
				  }, {
					value: 'xiaolv',
					label: '效率'
				  }, {
					value: 'kekong',
					label: '可控'
				  }]
				}]
				}],
				  // 修改数据
				updata: [
					{
					id: 8,
					name: "",
					photo: "",
					typename: "",
					sex: 1,
					mobile: "",
					cardid: "",
					pass: "",
					state: "",
					building: [],
					},
				],
			  imageUrl: '',
			   fileList: [],
			  rules: {},
			  xiugai: false,
			dialogVisible: false,
			currentPage4:1,
	        formInline: {
	          user: '',
	          region: ''
	        },
			multipleSelection: [],
			clerklist:[],
			pages:{
				page:1,
				psize:6,
				total:0
			},
			}
	    },
		mounted(){
			this.getClerkList()
		},
	    methods: {
			// 职员列表
			async getClerkList(){
				let res = await clerklist({
					page:this.pages.page,
					psize:this.pages.psize,
					key:this.key//查询
				})
				console.log(res,'0000');
				this.clerklist = res.data.list
				this.pages.total = res.data.counts
				console.log(res.data.list);
			},
			// 职员添加
		 	async add(){
				 const edituser = sessionStorage.getItem("name")
				 const params = {
					id:0,
					name: this.form.name,
					typename: this.form.typename,
					sex: this.form.sex,
					edituser:edituser,
					cardid: this.form.cardid,
					mobile: this.form.mobile,
				 }
				 let res = await clerkadd(params)
				 console.log(res);
				 if(res.errCode === 10000){
					 this.dialogVisible = false
					 this.getClerkList()
				 }
			},
			//修改
				update(option) {
				console.log(option);
				this.updata = option;
				this.xiugai = true;
				// this.amend()
				},

				async amend() {
				let res = await clerkadd({
					id: this.updata.id,
					name: this.updata.name,
					typename: this.updata.typename,
					sex: this.updata.sex,
					cardid: this.updata.cardid,
					mobile: this.updata.mobile,
					photo: this.updata.photo,
				});
				if (res.errCode == "10000") {
					this.$message({
					type: "success",
					message: "修改成功",
					});
					this.xiugai = false;
					this.getClerkList();
				}
				},

			//批量删除
		  DelAll() {
			let ids = [];
			this.selectID.forEach((element) => {
				console.log(element);
				ids.push(element.id);
			});
			this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
				center: true,
			})
				.then(async () => {
				let data = await clerkdelel({
					ids: ids,
				});
				if (data.errCode == "10000") {
					this.$message({
					type: "success",
					message: "删除成功!",
					});
				}
				this.getClerkList();
				})
				.catch(() => {
				this.$message({
					type: "info",
					message: "已取消删除",
				});
				});
			  },
			  // 单个删除
			  del(id) {
			          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
			            confirmButtonText: '确定',
			            cancelButtonText: '取消',
			            type: 'warning'
			          }).then(() => {
						clerkdel({id:id}).then((res)=>{
							if(res.errCode ==10000){
								this.getClerkList()
							}
						})
			            this.$message({
			              type: 'success',
			              message: '删除成功!'
			            });
			          }).catch(() => {
			            this.$message({
			              type: 'info',
			              message: '已取消删除'
			            });          
			          });
			        },
	      onSubmit() {
	        console.log('submit!');
	      },
		   handleClose(done) {
				this.$confirm('确认关闭？')
				.then(_ => {
					done();
				})
				.catch(_ => {});
			},
		  toggleSelection(rows) {
			if (rows) {
			  rows.forEach(row => {
				this.$refs.multipleTable.toggleRowSelection(row);
			  });
			} else {
			  this.$refs.multipleTable.clearSelection();
			}
		  },
		  handleSelectionChange(val) {
			this.multipleSelection = val;
			this.selectID = val;
		  },
		  // 分页
		  handleSizeChange(val) {
		  	console.log(`每页 ${val} 条`);
			this.pages.psize = val
			this.getClerkList()
		  },
		  handleCurrentChange(val) {
		  	console.log(`当前页: ${val}`);
			this.pages.page = val
			this.getClerkList()
		  },
		  // 门店上传
		  handleAvatarSuccess(res, file) {
			  this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
			  const isJPG = file.type === 'image/jpeg';
			  const isLt2M = file.size / 1024 / 1024 < 2;
	  
			  if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
			  }
			  if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			  }
			  return isJPG && isLt2M;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
				  if (valid) {
					alert('submit!');
				  } else {
					console.log('error submit!!');
					return false;
				  }
				});
			  },
			  handleChange(){

			  },
			  handleClose(){

			  },
			  resetForm(formName) {
				this.$refs[formName].resetFields();
			  }
			},
	    }
</script>

<style>
	
	  .text {
	    font-size: 14px;
	  }
	  .item {
	    margin-bottom: 18px;
	  }
	  .demo-form-ipt{
		  width: 120px;
	  }
	  .clearfix:before,
	  .clearfix:after {
	    display: table;
	    content: "";
	  }
	  .clearfix:after {
	    clear: both
	  }
	  .box-table{
		  margin-top: 30px;
	  }
	  .form-btn{
		  width: 100px;
	  }
	  .form-btn:nth-child(1){
		  margin-left: 40px;
	  }
	  .clearfix-clr{
		  color: #708fff;
	  }
	  .block{
		  text-align: center;
		  margin-top: 20px;
	  }
	  .dialog-footer{
		  text-align: right;
		  margin-right: 50px;
	  }
	  .item-form{
		  display: flex;
		  justify-content: space-between;
	  }
	   .avatar-uploader .el-upload {
	      border: 1px dashed #d9d9d9;
	      border-radius: 6px;
	      cursor: pointer;
	      position: relative;
	      overflow: hidden;
	    }
	    .avatar-uploader .el-upload:hover {
	      border-color: #409EFF;
	    }
	    .avatar-uploader-icon {
	      font-size: 28px;
	      color: #8c939d;
	      width: 88px;
	      height: 88px;
	      line-height: 88px;
	      text-align: center;
	    }
	    .avatar {
	      width: 88px;
	      height: 88px;
	      display: block;
	    }
	  .box-card {
		  width: 100%;
		  border: none;
	  }
	  .box-form{
		  margin-left: 20px;
	  }
	  /* 修改 */
	  .tianjia {
		display: flex;
		justify-content: space-between;
	}
	.left-box {
		margin-left: 30px;
	}
	.right-box {
		margin-right: 40%;
		margin: 0 auto;
		margin-top: 100px;
	}
</style>
